<template>
    <div class="tabs-nav">

        <slot></slot>
        <div class="line" ref="line"></div>
        <div class="actions-wrapper">
            <slot name="actions"></slot>
        </div>
    </div>
</template>

<script lang="ts">
  import Vue from "vue";
  import {Component, Prop, Inject, Ref} from "vue-property-decorator";

  @Component
  export default class TabsNav extends Vue {
    @Prop({type: Boolean, default: false}) disable: boolean;
    @Inject() readonly eventBus?;
    @Ref("line") line;


    mounted() {
      const that=this;
      this.eventBus.$on("update:selected-nav", (tabName, item) => {
        const left1 = that.$el.getBoundingClientRect().left;
        const {width, left} = item.$el.getBoundingClientRect();
        this.line.style.width = `${width}px`;
        this.line.style.left = `${left-left1}px`;
      });
    }

  }
</script>

<style lang="scss" scoped>
    $height: 40px;
    .tabs-nav {
        display: flex;
        height: $height;
        position: relative;
        border-bottom: 1px solid #eeeeee;

        > .line {
            position: absolute;
            border-bottom: 1px solid royalblue;
            bottom: 0;
            transition: all .5s;
        }

        > .actions-wrapper {
            margin-left: auto;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            margin-right: 20px;

            > .g-button {
                height: 30px;

                ::v-deep span {
                    line-height: 30px;
                }
            }
        }
    }
</style>